<template>
  <div class="sidebar">
    <div
      :class="{ active: chooseIndex === sIndex && !s.secondBar }"
      v-for="(s, sIndex) in sidebarList"
      v-bind:key="sIndex"
    >
      <span @click="toggleBar(sIndex, 'main')">
        <i class="el-icon-document"></i>
        <span>{{s.name}}</span>
        <i
          :style="{ opacity : s.secondBar? '1': '0' }"
          :class="s.isOpen === 1? 'el-icon-arrow-up': 'el-icon-arrow-down'"
        ></i>
      </span>
      <div class="secondPanel" :style="{ height: s.isOpen === 0? '0': 'auto' }">
        <div
          v-for="(b, bIndex) in s.secondBar"
          v-bind:key="bIndex"
          @click="toggleBar(bIndex, 'second')"
          :style="{ marginTop: bIndex === 0 && s.isOpen === 1? '10px': 0 }"
          :class="{ active: chooseIndex === sIndex && secondIndex === bIndex }"
        >
          <span>{{b.name}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script src="./Sidebar.js"></script>

<style lang="scss">
@import "./Sidebar.scss";
</style>
